<template>
  <el-dialog title="弹题题库设置" :visible="visible" width="65%" top="8vh" :close-on-click-modal="false" @close="handlerClose">
    <el-row v-if="visible" type="flex" justify="space-between" class="select-container">
      <!-- 左侧选择内容 start-->
      <div class="left-container">
        <el-form size="mini" :model="bank" :inline="true">
          <el-form-item label="题库分类"><edu-cascader :options="config.category.options" :value.sync="cascader" :args="config.category.args" /></el-form-item>
          <!--<el-form-item label="启用状态"><edu-select :options="config.status.options" :value.sync="bank.status" :args="{}" /></el-form-item>-->
          <el-form-item label="题库名称"><el-input v-model="bank.title" placeholder="请输入题库名称关键字" clearable /></el-form-item>
          <el-form-item><el-button @click="search">搜索</el-button></el-form-item>
        </el-form>
        <el-checkbox-group v-model="checkedValues">
          <el-table v-loading.lock="loading" :data="datas" style="width: 100%" height="400" @row-dblclick="pushChecked">
            <el-table-column label="选择" width="50">
              <template slot-scope="scope">
                <el-checkbox :label="scope.row.id" @change="pushChecked(scope.row)">{{ '' }}</el-checkbox>
              </template>
            </el-table-column>
            <el-table-column prop="title" label="题库名称" />
            <el-table-column prop="cates" label="所属分类" />
            <el-table-column prop="num" label="试题数量" />
          </el-table>
        </el-checkbox-group>
      </div>
      <!-- 左侧选择内容 end-->
      <!-- 右侧显示内容 start-->
      <div class="right-container">
        <div class="title">已选择题库</div>
        <el-scrollbar v-if="checkedList.length" class="scrollbar">
          <ul class="checked-list-ul">
            <li v-for="checked in checkedList" :key="checked.value">
              <el-row type="flex" justify="space-between">
                <text-tooltip :ref-name="'checked_'+checked.value" :width="154" :content="checked.title">
                  <span>{{ checked.title }}</span>
                </text-tooltip>
                <i class="el-icon-close" @click="removeChecked(checked.value)" />
              </el-row>
            </li>
          </ul>
        </el-scrollbar>
        <el-empty v-else description="请选择题库">
          <template v-slot:image>
            <span />
          </template>
        </el-empty>
      </div>
      <!-- 右侧显示内容 end-->
    </el-row>
    <el-pagination :current-page.sync="paginate.page" :page-size="paginate.count" layout="total, prev, pager, next,jumper" :total="total" @current-change="handleCurrentChange" />
    <div slot="footer" class="choose-footer">
      <el-button type="primary" size="small" :disabled="disabledSubmit" @click="handlerConfirm">确认</el-button>
      <el-button size="small" @click="handlerClose">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import EduCascader from '@public/form/cascader.vue';
// import EduSelect from '@public/form/select.vue';
export default {
  name: 'ChooseQuestionBank',
  components: {
    EduCascader
    // EduSelect
  },
  props: {
    dataType: {
      type: String,
      required: true
    },
    dataId: {
      type: Number,
      required: true
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: true,
      bank_id: 0, // 当前选中的题库ID
      response: null, // 列表返回数据
      cascader: null, // 筛选的分类
      // 题库筛选数据
      bank: {
        title: '',
        category: '',
        status: 1
      },
      // 分页
      paginate: {
        count: 16,
        page: 1
      },
      category: [],
      // 配置信息 用于edu组件参数
      config: {
        category: {
          options: [],
          args: {
            tigger: 'hover'
          }
        },
        status: {
          options: []
        }
      },
      checkedList: [],
      checkedValues: [],
      disabledSubmit: false
    };
  },
  computed: {
    datas() {
      if (this.response) {
        return this.response.data.datas;
      }
      return [];
    },
    total() {
      if (this.response) {
        return this.response.data.paginate.total;
      }
      return 0;
    }
  },
  watch: {
    cascader: {
      handler(datas) {
        const value = datas;
        const [val] = [...value].reverse();
        this.$set(this.bank, 'category', val);
      },
      deep: true
    }
  },
  created() {
    this.loadData()
    this.loadOptions()
    this.loadPopupData()
  },
  methods: {
    // 加载数据方法
    loadData: function() {
      this.loading = true;
      this.$http.get(
          '/exam/admin/question/bank/getChooseList',
          {
            ...this.paginate,
            ...this.bank,
            data_type: this.dataType,
            data_id: this.dataId
          },
          response => {
            this.response = response;
            this.loading = false;
          },
          _ => {
            this.loading = false;
          },
          false
      );
    },
    // 加载选项
    loadOptions() {
      this.$http.get(
          '/exam/admin/question/bank/choose',
          {
            data_type: this.dataType,
            data_id: this.dataId
          },
          response => {
            const { category, status } = response.data;
            this.$set(this.config.category, 'options', category);
            this.$set(this.config.status, 'options', status);
          },
          _ => {}
      );
    },
    loadPopupData() {
      this.$http.get(
          '/exam/admin/popup/get',
          {
            data_type: this.dataType,
            data_id: this.dataId
          },
          ({ data }) => {
            this.checkedList = data
            this.checkedValues = this.checkedList.map(item => item.value)
          },
          _ => {}
      )
    },
    // 分页
    handleCurrentChange: function(page) {
      this.paginate.page = page;
      this.loadData();
    },
    // 搜索
    search: function() {
      this.paginate.page = 1;
      this.loadData();
    },
    // 关闭弹出层
    handlerClose() {
      this.$emit('update:visible', false);
      this.$emit('cancel');
    },
    // 确认
    handlerConfirm() {
      this.disabledSubmit = true
      this.$http.post(
          '/exam/admin/popup/set',
          {
            data_type: this.dataType,
            data_id: this.dataId,
            bank_ids: this.checkedValues
          },
          ({ msg }) => {
            this.$message.success(msg)
            this.disabledSubmit = false
          },
          ({ msg }) => {
            this.$message.error(msg)
            this.disabledSubmit = false
          }
      )
    },
    // 添加选中
    pushChecked(row) {
      const { id: value, title } = row
      const checkedValues = this.checkedList.map(item => item.value)
      if (!checkedValues.includes(value)) {
        this.checkedList.push({
          title,
          value
        })
        this.checkedValues = this.checkedList.map(item => item.value)
      } else {
        this.removeChecked(value)
      }
    },
    // 移除选中
    removeChecked(value) {
      const index = this.checkedList.findIndex(item => item.value === value);
      this.checkedList.splice(index, 1);
      this.checkedValues = this.checkedList.map(item => item.value)
    }
  }
};
</script>
<style scoped lang="scss">
.select-container{
  width: 100%;
  height: 488px;
  margin-bottom: 20px;
  .scrollbar{
    height: calc(100% - 42px);
  }
  .left-container{
    width: 62.5%;
  }
  .right-container{
    width: 37.5%;
    height: 100%;
    border-left: 1px solid #EBEEF5;
    padding: 6px 0 0 20px;
    .title{
      padding-bottom: 10px;
      font-size: 14px;
      font-weight: 500;
      color: #A4A4A4;
      border-bottom: 1px solid #EBEEF5;;
    }
    .checked-list-ul{
      list-style-type: none;
      padding: 0;
      margin: 20px 0 0 0;
      li{
        &:after {
          content: "";
          display: table;
          clear: both;
        }
        font-size: 14px;
        font-weight: 400;
        color: #5d5d5d;
        margin-bottom: 15px;
        .el-icon-close{
          font-size: 14px;
          cursor: pointer;
          margin-right: 8px;
          &:hover{
            color: #5193FF;
          }
        }
      }
    }
  }
}
</style>
